import 'package:flutter/material.dart';

class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text('容器的例子'),
      ),
      body: Column(
        children: <Widget>[
          // 综合
          Container(
            margin: EdgeInsets.only(top: 50, left: 120),  // 容器外填充
            constraints: BoxConstraints.tightFor(width: 200, height: 150),  // 卡片大小
            decoration: BoxDecoration( // 背景装饰
              gradient: RadialGradient(
                colors: [Colors.red, Colors.orange],
                center: Alignment.topLeft,
                radius: 0.98,
              ),
              boxShadow: [
                BoxShadow(
                  color: Colors.black54,
                  offset: Offset(2, 2),
                  blurRadius: 4,
                ),
              ],
            ),
            transform: Matrix4.rotationZ(0.2), // 卡片倾斜变换
            alignment: Alignment.center, // 卡片内文字居中
            child: Text(
              '5.20',
              style: TextStyle(
                color: Colors.white,
                fontSize: 40,
              ),
            ),
          ),

          // 留白
          Container(
            height: 80,
          ),

          // 容器外补白
          Container(
            margin: EdgeInsets.all(20),
            color: Colors.orange,
            child: Text('Hello World'),
          ),

          // 容器内补白
          Container(
            padding: EdgeInsets.all(20),
            color: Colors.orange,
            child: Text('Hello World'),
          ),
        ],
      ),
    );
  }
}